<%@page import="java.util.Date"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<head>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script src="<c:url value="resources/js/jquery.autocomplete.min.js" />"></script>

<style type="text/css">
.autocomplete-suggestions {
	border: 1px solid #999;
	background: #FFF;
	overflow: auto;
}

.autocomplete-suggestion {
	padding: 5px 5px;
	white-space: nowrap;
	overflow: hidden;
	font-size: 22px
}

.autocomplete-selected {
	background: #F0F0F0;
}

.autocomplete-suggestions strong {
	font-weight: bold;
	color: #3399FF;
}
</style>


<script type="text/javascript">
	function loadHeader() {
		$.ajax({
			url : 'loadheader.html',
			contentType : "application/x-www-form-urlencoded;charset=utf-8",
			scriptCharset : "utf-8",
			dataType : "html",
			encoding : "UTF-8",
			success : function(data) {
				$('.acount').html(data);
				$('.hidediv').hide();
			}
		});
	}
</script>
</head>
<body onload="loadHeader()">
	
	
	<c:url value="/logout" var="logoutUrl" />
	<form action="${logoutUrl}" method="post" id="logoutForm">
		<input type="hidden" name="${_csrf.parameterName}"
			value="${_csrf.token}" />
	</form>
	<script>
		function formSubmit() {
			document.getElementById("logoutForm").submit();
		}
	</script>

	<div class="top">
		<div class="acount"></div>
		<div class="line"></div>
	</div>

	<!-- HEADER : START -->
	<div class="header">
		<div class="info">
			<ul>
				<li class="worktime">
					<p>LÀM VIỆC</p> <span>08:30 sáng - 10:00 tối</span>
				</li>
				<li class="shipping">
					<p>GIAO HÀNG VÀ THU TIÊN</p> <span>Tận nơi toàn quốc</span>
				</li>
				<li class="hotline">
					<p>ĐẶT HÀNG NHANH</p> <span>(08) 6868 6868</span>
				</li>
				<li class="moneyback">
					<p>BẢO HÀNH 365 NGÀY</p> <span>08:30 sáng - 10:00 tối</span>
				</li>
			</ul>
		</div>
		<div class="bottom">
			<div id="logo">
				<img src="resources/images/logo.png" alt="images" />
			</div>
			<div class="search-block">
				<div class="search-form">
					<form method="get" action="search.html">
						<input type="text" class="input" name="search" id="w-input-search" value="" /> 
						<button id="button-id" type="submit" class="button">Search Teams</button>
					</form>
				</div>
			</div>
		</div>

		<div class="nav-container">

			<div id="ddtopmenubar" class="nav-menu">
				<ul class="level1">
					<li><a href="home.html">Trang Chủ</a></li>

					<!-- <li><a href="#" rel="ddsubmenu1">ashdgsd</a></li> -->
					<c:forEach var="item" items="${newmodel.childs}">

						<li><a href="detailcategory.html?id=${item.value.categoryId}"
							rel="${item.value.categoryId}"> <c:out
									value="${item.value.categoryName}"></c:out>
						</a></li>

					</c:forEach>
				</ul>
			</div>

			<c:forEach var="menuItem" items="${newmodel.childs}">
				<c:if test="${menuItem.hasChild()}">
					<ul class="ddsubmenustyle" id="${menuItem.value.categoryId}">
						<c:forEach var="item" items="${menuItem.childs}">
							<li><a
								href="detailcategory.html?id=${item.value.categoryId}"> <c:out
										value="${item.value.categoryName}"></c:out></a> <c:if
									test="${item.hasChild()}">
									<ul>
										<c:forEach var="ii" items="${item.childs}">
											<li><a
												href="detailcategory.html?id=${ii.value.categoryId}"> <c:out
														value="${ii.value.categoryName}"></c:out></a> <c:if
													test="${ii.hasChild()}">
													<ul>
														<c:forEach var="iii" items="${ii.childs}">
															<li><a
																href="detailcategory.html?id=${iii.value.categoryId}">
																	<c:out value="${iii.value.categoryName}"></c:out>
															</a> <c:if test="${iii.hasChild()}">
																	<ul>
																		<c:forEach var="iiii" items="${iii.childs}">
																			<li><a
																				href="detailcategory.html?id=${iiii.value.categoryId}">
																					<c:out value="${iiii.value.categoryName}"></c:out>
																			</a></li>
																		</c:forEach>
																	</ul>
																</c:if></li>
														</c:forEach>
													</ul>
												</c:if></li>
										</c:forEach>
									</ul>
								</c:if></li>
						</c:forEach>
					</ul>
				</c:if>
			</c:forEach>

			<!-- 			<ul class="ddsubmenustyle" id="2">
				<li><a href="#">LINK2 ITEM 1</a></li>
				<li><a href="#">LINK2 ITEM 2</a></li>
				<li><a href='#'>LINK2 ITEM 3</a>
					<ul>
						<li><a href='#'>LINK2 ITEM 3.1</a></li>
					</ul></li>
				<li><a href='#'>LINK2 ITEM 4</a></li>
			</ul> -->

			<script type="text/javascript">
				ddlevelsmenu.setup("ddtopmenubar", "topbar")
			</script>
		</div>

	</div>

	<!-- HEADER : END -->
</body>
